<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jQuery库/jquery-1.12.3.min.js"></script>
    <script src="./js/muban/template.js"></script>
</head>
<style>
    .box{
        width:800px;
        height:1000px;
        border:1px solid red;
    }
    .lie{
        width:665px;
        border:1px solid blue;
    }
    .lie div{
        display: flex;
        font-size:14px;
    }
    .lie div img{
        width:250px;
        height:166px;
    }
    .ye{
        display: flex;
    }
    .yema{
        list-style: none;
        display: flex;
        height:20px;
        border:1px solid green;
    }
    .yema li{
        width:20px;
    }
    
</style>
<body>
    <div class="box">
        <ul class="lie">
            <script type="text/html" id="moban">
                {{each data as el index }}
                <li>
                   <h3>{{el.biaoti}}</h3>
                   <div>
                    {{if el.img}} 
                        <img src="{{el.img}} " alt="">
                    {{/if}}       
                        <p>{{el.ziduan}}</p>
                   </div>
                </li>
                {{/each}}
            </script>
        </ul>
    </div>
    <div class="ye">
        <div class="shang">下一页</div>
        <div class="yema"></div>
        <div class="xia">上一页</div>
    </div>
    <script>
          $.ajax({
                method:"get",
                url:"./shuju.json",
                success:function(data){
                   console.log(data)
                   var item = 4;
                   var ye = Math.ceil(data.length/item);
                   console.log(ye)
                   for(var i = 0; i<ye; i++){
                       $(".yema").append(`<li>${i+1}</li>`)
                   }
                   $(".yema").delegate("li","click",function(){
                       console.log($(this));
                       getDate($(this),data,item);
                       index = $(this).text()*1;

                   })
                   $(".yema>li").eq(0).click();
                   var flag =true;
                   $(".xia").click(function(){
                    if (flag) {
                        index = index - 2;
                    } else {
                        index = index - 1;
                    };
                    flag = false;
                    getDate($('.yema>li').eq(index), data, item)
                   })
                },
                error:function(err){
                    console.log(err)
                }

                
            })

        function getDate(element, data, item) {
            element.siblings().css('background', 'green');
            element.css('backgroundColor', 'red');
            var index = element.text() * 1;
            var dataNew = data.slice((index - 1) * item, index * item);
            var dataObj = {
                data: dataNew,
            }
            var str = template('moban', dataObj);
            $('.lie').empty();
            $('.lie').append(str);
        }
    </script>
   
</body>
</html>